<template>
  <div class="mod-config">
    <basic-container>
      <div>
        <el-button icon="el-icon-plus" size="small" @click="handleAddGroup">添加分组</el-button>
      </div>
      <div style="margin-top:10px;">
        <el-tabs v-model="selectedId" tab-position="left" style="max-height: 700px;" stretch >
          <el-tab-pane :label="item.materialGroupName" :name="item.id" v-for="(item, index) in materialGroupDataList" :key="index" >
            <MaterialForm :ref="'menuItem'+item.id" 
                          :materialGroupId="item.id" 
                          :materialGroupName="item.materialGroupName" 
                          @updateMaterialGroup="handleUpdateMaterialGroup" 
                          @deleteMaterialGroup="handleDeleteMaterialGroup"
                          :hasDialog="hasDialog"
                          :hasSingle="hasSingle"></MaterialForm>
          </el-tab-pane>
          <!-- <el-tab-pane label="配置管理">
            <MaterialForm></MaterialForm>
          </el-tab-pane>
          <el-tab-pane label="角色管理">
            <MaterialForm></MaterialForm>
          </el-tab-pane>
          <el-tab-pane label="定时任务补偿">
            <MaterialForm></MaterialForm>
          </el-tab-pane> -->
        </el-tabs>
      </div>
      <div class="foot-btn" v-if="hasDialog">
        <el-button type="primary" @click="handleSelectMaterial()">确定</el-button>
      </div>
    </basic-container>
  </div>
</template>

<script>
  import MaterialForm from './material.vue'
  import {getPageList, addObj, putObj, delObj} from '@/api/material/group';
  
  export default {
    data(){
      return{
        materialGroupDataList:[],
        selectedId:''
      }
    },
    components:{MaterialForm},
    props:{
      hasDialog:{
        type:Boolean,
        default:false
      },

      hasSingle:{
        type:Boolean,
        default:false
      }
    },
    mounted(){
      this.init()
    },
    watch:{
      selectedId(){
        if(this.selectedId == 0){
          return
        }
        this.getMaterial()
      }
    },
    methods:{
      init(){
        this.materialGroupDataList = []
        getPageList().then(res=>{
          this.materialGroupDataList = res.data.data
          this.materialGroupDataList.unshift({
            id: '-1',
            materialGroupName: '默认分组'
          })
          this.selectedId = this.materialGroupDataList[0].id
          // if(this.selectedId == ''){
          //   this.selectedId = this.materialGroupDataList[0].id
          // }
          // console.log(this.selectedId)
          
        })
      },

      /**
       * 添加分组
       */
      handleAddGroup(){
        this.$prompt('请输入分组名', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValidator: (value) => {       // 点击按钮时，对文本框里面的值进行验证
            if(!value) {
                return '输入不能为空';
            }
            if(value.length > 4) {
                return '输入的分组名称不能超过4位';
            }
          },
        }).then(({ value }) => {
          addObj({
            materialGroupName: value
          }).then(res=>{
            this.init()
            this.$message.success("添加成功");
          })        
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      },

      /**
       * 获取素材库
       */
      getMaterial(){
        this.$nextTick(()=>{
          this.$refs[`menuItem${this.selectedId}`][0].init()
        })
      },


      /**
       * 重命名组名
       */
      handleUpdateMaterialGroup(callback){
        let item = this.materialGroupDataList.filter(p=>p.id == this.selectedId)[0]
        this.$prompt('请输入组名', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue: item.materialGroupName,
          inputValidator: (value) => {
            if(!value) {
                return '输入不能为空';
            }
            if(value.length > 4) {
                return '输入的分组名称不能超过4位';
            }
          },
        }).then(({ value }) => {
          putObj({
            id: item.id,
            materialGroupName: value
          }).then(res=>{
            item.materialGroupName = value
            callback(value)
            this.$message.success("修改成功");
          })
        }).catch(() => {  
        });
      },

      /**
       * 删除组名
       */
      handleDeleteMaterialGroup(callback){
        let that = this
        this.$confirm("是否确认删除该分组？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(function () {
          console.log('234234')
          return delObj(that.selectedId);
        })
        .then((data) => {
          this.init()
          this.$message.success("删除成功");
        })
        .catch(() => {});
      },

      /**
       * 获取选择的图片
       */
      handleSelectMaterial(){
        this.$refs[`menuItem${this.selectedId}`][0].getSelectedMaterial((data)=>{
          this.$emit('selectMaterialData', data)
        })
      }

    }
  }
</script>

<style scoped>
.foot-btn{
  display: flex;
  justify-content: flex-end;
}
</style>